<template>
	<view class="register">
		<view class="title">
			赊货签
		</view>

		<uni-forms ref="form" :modelValue="formData" label-width="80px" :rules="rules">
			<view v-show="showCode" class="textH">
				欢迎注册账号
			</view>
			<uni-forms-item v-show="showCode" label="手机号" name="Phone">
				<input type="number" v-model="formData.Phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<!-- <p></p>
			 -->
			<p v-show="showCode"></p>
			<view v-show="!showCode && isShow">
				<uni-forms-item label="验证码" name="SmsCode">
					<input type="number" v-model="formData.SmsCode" placeholder="请输入验证码" />
				</uni-forms-item>
				<!-- <uni-forms-item label="姓名" name="SmsCode">
					<input type="number" v-model="formData.SmsCode" placeholder="请输入姓名" />
				</uni-forms-item>
				<p></p>
				<uni-forms-item label="店铺" name="SmsCode">
					<input type="number" v-model="formData.SmsCode" placeholder="请输入验证" />
				</uni-forms-item>
				<p></p>
				
				<uni-forms-item label="密码" name="Password">
					<input type="password" v-model="formData.Password" placeholder="请输入密码" />
				</uni-forms-item> -->
				<!-- <p></p> -->
			</view>
			<view v-show="isRegister">
				<uni-forms-item label="姓名" name="Name">
					<input type="text" v-model="formData.Name" placeholder="请输入姓名" />
				</uni-forms-item>
				<p></p>
				<uni-forms-item label="店铺" name="ShopName">
					<input type="text" v-model="formData.ShopName" placeholder="请输入店铺" />
				</uni-forms-item>
				<p></p>

				<uni-forms-item label="密码" name="Password">
					<input type="text" v-model="formData.Password" placeholder="请输入密码" />
				</uni-forms-item>
			</view>
			<button v-if="showCode" round @click="registerOrSend(1)" type="primary">发送验证码</button>
			<button v-if="nextCode" round @click="registerOrSend(2)" type="primary">下一步</button>
			<button v-if="isRegister" round @click="registerOrSend(3)" type="primary">注册</button>

			<view v-show="showCode" class="flex" style="margin-bottom: 40rpx;">
				<view class="" style="display: flex;flex-wrap: wrap;width: 80%;">
					<checkbox-group @change="changeAgree">
						<label>
							<checkbox value="a" :checked="agree" />
							我已阅读并同意
						</label>
					</checkbox-group>
					<text @click="openAgreement" style="color: #b051ff">《用户服务协议》、</text>
					<text @click="openUse" style="color: #b051ff;">《隐私政策》</text>
				</view>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		regPhone
	} from '../../utils/regExp.js'
	export default {
		data() {
			return {
				showCode: true,
				// 是否下一步
				nextCode: false,
				isRegister: false,
				isShow: false,
				formData: {
					Phone: '',
					Name: '',
					ShopName: '',
					SmsCode: '',
					Password: '',
					rpw: '',
					Type: 'APP'
				},
				agree: false, // 是否同意条款
				rules: {
					Phone: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (!regPhone.test(value)) return callback('手机号格式错误')
								return true
							}
						}]
					},
					SmsCode: {
						rules: [{
							require: true,
							errorMessage: '请填写验证码',
						}]
					},
					Password: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}]
					},
					rpw: {
						rules: [{
							required: true,
							errorMessage: '请再次填写密码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								console.log(data);
								if (value !== data.Password) return callback('两次密码不一致')
								return true
							}
						}]
					},
				}
			}
		},
		methods: {
			openAgreement() {
				uni.navigateTo({
					url: '/pages/User/customerPage?Type=1'
				})
			},
			openUse() {
				uni.navigateTo({
					url: '/pages/webview/Use'
				})
			},
			changeAgree(e) {
				if (e.detail.value.length > 0) this.agree = true
				// else this.agree = false
			},
			// 注册或发送验证码
			registerOrSend(type) {
				console.log('类型', type)
				if (type == 1) {
					// 发送验证码
					if (!this.agree) return uni.showToast({
						icon: 'none',
						title: '请阅读并同意使用条款后进行注册'
					})
					this.send()
				} else if (type == 2) {
					console.log('下一步')
					if (this.formData.SmsCode == "") return this.$api.msg('请输入验证码')

					console.log('可以验证码脚丫了', this.formData)
					// 校验验证码
					this.$http('post', '/BO/CustomerinfoMerchant/VerificationCode?Phone=' + this.formData.Phone +
						'&Smscode=' + this.formData.SmsCode).then(res => {
						uni.hideLoading()
						if (res.Success) {
							console.log('发送验证码', res)
							// if(res.Data==false) return this.$api.msg('验证码不对，请重新获取')
							// 显示最终注册页面
							this.isRegister = true
							// 隐藏下一步按钮
							this.nextCode = false
							// 隐藏发送按钮
							this.showCode = false
							this.isShow = false

						}
						// else{
						// 	uni.showToast({
						// 		icon: 'none',
						// 		title: res.Msg+' 请登录'
						// 	})
						// 	setTimeout(() => {
						// 		uni.redirectTo({
						// 			url: '/pages/Login/Login'
						// 		})
						// 	}, 1000)
						// }
					})

				} else {

					this.isRegister = true

					if (!this.formData.Name) return this.$api.msg('请输入姓名')
					if (!this.formData.ShopName) return this.$api.msg('请输入店铺名称')
					if (!this.formData.Password) return this.$api.msg('请输入密码')
					console.log('注册了', this.formData)
					this.register()

				}


				// if (this.showCode) this.register()
				// else {

				// }
			},
			send() {
				uni.showLoading({
					title: '发送中'
				})
				this.$refs.form.validateField(['Phone']).then(res => {
					// uni.showLoading()

					// this.$http('post', '/Base_Manage/Base_User/SaveRegister', this.formData).then(res => {
					this.$http('post', '/BO/CustomerinfoMerchant/cCusRegister', this.formData).then(res => {
						uni.hideLoading()
						if (res.Success) {
							console.log('发送验证码', res)
							uni.showToast({
								icon: 'none',
								title: '验证码已发送'
							})
							this.showCode = false
							this.isShow = true
							this.nextCode = true
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg + '请登录'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/Login/Login'
								})
							}, 1000)
						}
					})
				}).catch((err) => {
					console.log(err);
				})
			},
			register() {
				uni.showLoading({
					title: '注册中'
				})
				this.$refs.form.validate().then(res => {
					this.$http('post', '/BO/CustomerinfoMerchant/Saveuser', {
						"Name": this.formData.Name,
						"LoginPhone": this.formData.Phone,
						"LoginPassWord": this.formData.Password,
						"Phone": this.formData.Phone,
						"ShopName": this.formData.ShopName
					}).then(res => {
						if (res.Success) {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '注册成功'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/Login/Login'
								})
							}, 1000)
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})
				}).catch(err => {
					console.log(err);
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.title {
		text-align: center;
		font-size: 70rpx;
		font-weight: bolder;
		color: #fff;
		margin-top: 140rpx;
		margin-bottom: 15%;
	}

	.textH {
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		color: #666666;
		margin-bottom: 60rpx;
	}

	::v-deep.uni-forms {
		background-color: #fff;
		display: flexbox;
		border-radius: 17px;
		padding: 20px 0;
	}

	::v-deep.uni-forms-item {
		color: #000;
		padding: 10rpx 20rpx 10rpx 33rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

	}

	::v-deep.uni-forms-item__error {
		color: #f56c6c;
		font-size: 12px;
		line-height: 3;
	}

	.register {
		width: 100%;
		height: 100%;
		background: $LoginBG no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;
		padding: 30rpx;

		p {
			border-bottom: 1px solid #d5d5d5;
			width: 92%;
			margin: 0 auto;
			margin-bottom: 5%;
			margin-top: -2%;
		}

		button {
			width: 90%;
			border-radius: 100rpx;
			font-size: 20px;
			font-weight: bold;
			margin-top: 75rpx;
			margin-bottom: 20rpx;
			background: linear-gradient(to left, #b5ceff, #3b6dff);
		}


		.flex {
			display: flex;
			margin-top: 40rpx;
			text-align: center;
			color: #a6a6a6;
			font-size: 15px;
			justify-content: center;
			// margin-left: 20%;
		}
	}
</style>